<template>
	<view class="">
		<view v-if="!isLogin" class="login flex-col col-center row-center">
			<u-loading size="40" color="#00632B" mode="circle" :show="showLoading"></u-loading>
			<image :src="imgUrl + '/static/images/goods_null.png'" v-show="!isLogin"></image>
			<router-link to="/pages/login/login">
				<view class="muted mt20" style="font-size: 36rpx;" v-show="!isLogin">请先登录商城</view>
			</router-link>
		</view>
		<view v-else class="goods-cate">
			<loading-view v-if="isFirstLoading"></loading-view>
			<scroll-view style="height: 100%;width: 100%;" scroll-y @scrolltolower="onreachBottom">
				<view class="content">
					<view class="goods_list_view">
						<view class="sort-nav-wrap">
							<sort-nav v-model="sortConfig" :show-type="false"></sort-nav>
						</view>
						<view class="goods-list">
							<view v-for="(item,i) in goodsList" :key="i">
								<view class="list-item"
									@click="goPage({path:'/pages/goods_details/goods_details?id=' + item.id})">
									<image class="thumb" style="width: 320rpx; height: 427rpx; margin-top: 30rpx;"
										mode="aspectFill" :src="item.image"></image>
									<u-icon-stop @click.stop="collectGoodsFun(item)" class="heart_icon_badge"
										color="#00632B" size="40"
										:name="item.is_collect == 1 ? 'heart-fill' : 'heart'"></u-icon-stop>
									<view class="product-title">{{item.name}}</view>
									<view class="con">
										<view class="price">￥{{item.min_price}}</view>
									</view>
								</view>
							</view>
							<loading-footer :status="status" :slot-empty="true">
								<view slot="empty" class="flex-col col-center" style="padding: 200rpx 0 0">
									<image class="img-null" :src="imgUrl + '/static/images/goods_null.png'"></image>
									<text class="lighter sm">暂无商品</text>
								</view>
							</loading-footer>
						</view>
					</view>

				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsList,
		getListByLevelOne,
	} from '@/api/store';
	import {
		getRect,
		trottle,
		arraySlice
	} from '@/utils/tools';
	import {
		loadingType
	} from '@/utils/type.js'
	import {
		collectGoods,
	} from '@/api/user'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				params: '',
				page: 1,
				isFirstLoading: true,
				goodsList: [],
				imgUrl: `${this.$imgUrl}/wechat`,
				sortConfig: {
					goodsType: 'double',
					priceSort: '',
					saleSort: 'desc',
				},
			};
		},
		async onLoad(options) {
			this.params = this.$Route.query;
			this.page = 1
			this.goodsList = []
			this.getGoodsListFun();
			console.log('=============this.params========');
			console.log(this.params);
			let nav_title = this.params.nav_title ? decodeURIComponent(this.params.nav_title) : '';
			if(nav_title){
				uni.setNavigationBarTitle({
					title: nav_title
				});
			}
		},
		watch: {
			'sortConfig.saleSort'() {
				this.onRefresh()
			},
			'sortConfig.priceSort'() {
				this.onRefresh()
			}
		},
		methods: {
			goPage(url) {
				uni.navigateTo({
					url: url.path
				});
			},
			//收藏商品
			async collectGoodsFun(item) {
				if (!this.isLogin) return this.$Router.push('/pages/login/login')
				const {
					msg,
					code
				} = await collectGoods({
					goods_id: item.id
				});
				if (code == 1) {
					this.$toast({
						title: msg
					});
					item.is_collect = !item.is_collect;
				}
			},
			onreachBottom() {
				console.log('======onreachBottom=======');
				this.getGoodsListFun()
			},
			onRefresh() {
				console.log('==========onRefresh=================');
				this.status = loadingType.LOADING
				this.page = 1
				this.goodsList = []
				this.getGoodsListFun()
			},
			getGoodsListFun() {
				//或者uview中的工具方法
				//let query_string = uni.$u.queryParams(this.params);
				// this.status = loadingType.LOADING
				let query_string = '&';
				if (this.params && typeof this.params === 'object') {
					query_string = query_string + Object.keys(this.params)
						.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(this.params[key])}`)
						.join('&');
				}
				console.log('--------query_string---------');
				console.log(query_string);
				let {
					page,
					goodsList,
					sortConfig: {
						priceSort,
						saleSort,
					}
				} = this;
				let sort_by_update = !priceSort && !saleSort ? 'desc' : '';
				getGoodsList({
					page_no: page,
					sort_by_price: priceSort,
					sort_by_sales: saleSort,
					sort_by_update: sort_by_update,
					query_string:query_string
				}).then(res => {
					this.isFirstLoading = false;
					if (res.code == 1) {
						let {
							more,
							lists,
						} = res.data;
						goodsList.push(...lists);
						this.page++;
						if (!more) {
							this.status = loadingType.FINISHED;
						}
						if (goodsList.length <= 0) {
							this.status = loadingType.EMPTY
							return;
						}
					} else {
						this.status = loadingType.ERROR
					}
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	$header-height: 94rpx;

	page {
		background-color: #fff;
		height: 100%;

		.goods-cate {
			display: flex;
			flex-direction: column;
			height: calc(100vh - var(--window-top));
			width: 100%;

			.swiper-box {
				flex: 1;
			}

			.content {
				.goods_list_view {
					.sort-nav-wrap {
						margin-left: 400rpx;
						margin-right: 30rpx;
					}

					.goods-list {
						width: 750rpx;
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						align-items: center;
						margin: 0rpx 15rpx;

						.list-item {
							width: 320rpx;
							overflow: hidden;
							background: #fff;
							padding-bottom: 20rpx;
							margin-bottom: 20rpx;
							margin: 0rpx 20rpx;

							.thumb {
								z-index: -10;
								width: 100%;
								height: 180px;
								//margin: 0 auto;
								display: block;
							}

							.heart_icon_badge {
								z-index: 99;
								position: relative;
								bottom: 390rpx;
								left: 260rpx;
							}

							.product-title {
								position: relative;
								top: -20rpx;
								font-size: 30rpx;
								padding-left: 20rpx;
								overflow: hidden;
								-webkit-line-clamp: 2;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
							}

							.con {
								display: flex;
								justify-content: center;
								padding-left: 20rpx;
								display: flex;
								align-items: center;
								// justify-content: space-between;
								// padding-right: 20rpx;

								.price {
									color: $-color-black;
								}

								// .buy-num {
								// 	font-size: 26rpx;
								// }

							}
						}

					}
				}
			}
		}

		.overlay {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 99;
			/* 确保在 u-mask 之上 */
			background-color: transparent;
			/* 透明遮罩 */
		}





	}
</style>